<template>
	<view class="category-container">
		<!-- 顶部导航栏和标题 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="back-button" @click="handleGoBack">
				<text class="back-icon">←</text>
			</view>
			<view class="header-content">
				<text class="header-title">选择测试分类</text>
				<text class="header-subtitle">选择要测试的知识分类（可多选）</text>
			</view>
		</view>

		<!-- 分类列表 -->
		<scroll-view class="category-scroll" scroll-y>
			<view class="category-list">
				<view 
					v-for="category in availableCategories" 
					:key="category.id"
					class="category-card"
					:class="{ 'category-selected': selectedCategories.includes(category.id) }"
					@click="handleToggleCategory(category.id)"
				>
					<!-- 选中图标 -->
					<view class="select-icon">
						<view class="icon-inner" v-if="selectedCategories.includes(category.id)"></view>
					</view>

					<!-- 分类信息 -->
					<view class="category-info">
						<text class="category-icon">{{ category.icon }}</text>
						<view class="category-details">
							<text class="category-name">{{ category.name }}</text>
							<text class="category-count">{{ getCategoryQuestionCount(category.id) }} 道题</text>
						</view>
					</view>

					<!-- 选中标记 -->
					<view v-if="selectedCategories.includes(category.id)" class="selected-badge">
						<text class="badge-text">已选</text>
					</view>
				</view>
			</view>

			<!-- 底部提示 -->
			<view class="tip-section" v-if="selectedCategories.length > 0">
				<view class="tip-card">
					<text class="tip-icon">💡</text>
					<text class="tip-text">已选择 {{ selectedCategories.length }} 个分类，将从 {{ totalSelectedQuestions }} 道题中随机抽取 10 道进行测试</text>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<button 
				class="action-btn primary-btn" 
				@click="handleStartTest"
				:disabled="selectedCategories.length === 0"
			>
				<text class="btn-text">开始测试</text>
			</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, computed } from 'vue';
	import { categories } from '@/data/knowledge';
	import { getQuestionsByTechId } from '@/services/exam';
	import type { Category } from '@/types/knowledge';

	// 技术ID
	const techId = ref('');
	
	// 可用分类（根据技术筛选）
	const availableCategories = ref<Category[]>([]);
	
	// 已选择的分类
	const selectedCategories = ref<string[]>([]);
	
	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		// 基础间距 20px（约等于 40rpx），加上安全区域
		return safeAreaTop + 20;
	});

	// 总题目数
	const totalSelectedQuestions = computed(() => {
		return selectedCategories.value.reduce((total, categoryId) => {
			return total + getCategoryQuestionCount(categoryId);
		}, 0);
	});

	// 页面加载
	onLoad((options: any) => {
		const channelId = options.channelId || '';
		techId.value = channelId.replace('-exam', '');
		
		if (!techId.value) {
			uni.showToast({
				title: '参数错误',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1500);
			return;
		}

		// 根据技术ID筛选分类（目前只有Java有分类）
		if (techId.value === 'java') {
			availableCategories.value = categories;
		} else {
			// 其他技术暂时没有分类
			availableCategories.value = [];
		}
	});

	// 获取分类的题目数量
	const getCategoryQuestionCount = (categoryId: string): number => {
		const questions = getQuestionsByTechId(techId.value);
		const categoryName = categories.find(c => c.id === categoryId)?.name || '';
		const count = questions.filter(q => q.category === categoryName).length;
		return count; // 返回该分类的所有题目数量
	};

	// 切换分类选择
	const handleToggleCategory = (categoryId: string) => {
		const index = selectedCategories.value.indexOf(categoryId);
		if (index > -1) {
			selectedCategories.value.splice(index, 1);
		} else {
			selectedCategories.value.push(categoryId);
		}
	};

	// 开始测试
	const handleStartTest = () => {
		if (selectedCategories.value.length === 0) {
			uni.showToast({
				title: '请至少选择一个分类',
				icon: 'none',
				duration: 2000
			});
			return;
		}

		// 跳转到测试页面，传递选择的分类
		uni.navigateTo({
			url: `/pages/exam/test?techId=${techId.value}&categories=${selectedCategories.value.join(',')}`
		});
	};

	// 返回上一页
	const handleGoBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.category-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
	}

	/**
	 * 顶部导航栏和标题
	 */
	.header {
		flex-shrink: 0;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-sizing: border-box;
	}

	.back-button {
		width: 72rpx;
		height: 72rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		transition: all 0.3s ease;
		flex-shrink: 0;

		&:active {
			transform: scale(0.92);
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
		}
	}

	.back-icon {
		font-size: 44rpx;
		color: #2c3e50;
		font-weight: 700;
	}

	.header-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		padding-right: 20rpx;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	.header-subtitle {
		font-size: 26rpx;
		color: #64748b;
		font-weight: 500;
	}

	/**
	 * 分类列表
	 */
	.category-scroll {
		flex: 1;
		padding: 24rpx;
		overflow-y: auto;
		box-sizing: border-box;
		width: 100%;
	}

	.category-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	/**
	 * 分类卡片
	 */
	.category-card {
		background: white;
		border-radius: 20rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;
		border: 3rpx solid transparent;
		position: relative;

		&:active {
			transform: scale(0.98);
		}
	}

	.category-selected {
		background: linear-gradient(135deg, #f0f4ff 0%, #e8eaf6 100%);
		border-color: #667eea;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.2);
	}

	/**
	 * 选择图标
	 */
	.select-icon {
		width: 48rpx;
		height: 48rpx;
		border: 3rpx solid #cbd5e1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: all 0.3s ease;
	}

	.category-selected .select-icon {
		border-color: #667eea;
		background: white;
	}

	.icon-inner {
		width: 28rpx;
		height: 28rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
	}

	/**
	 * 分类信息
	 */
	.category-info {
		flex: 1;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.category-icon {
		font-size: 56rpx;
		line-height: 1;
	}

	.category-details {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}

	.category-name {
		font-size: 32rpx;
		font-weight: 700;
		color: #1a202c;
		line-height: 1.3;
	}

	.category-count {
		font-size: 24rpx;
		color: #64748b;
		font-weight: 600;
	}

	/**
	 * 选中标记
	 */
	.selected-badge {
		padding: 8rpx 20rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 100rpx;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.badge-text {
		font-size: 24rpx;
		font-weight: 700;
		color: white;
	}

	/**
	 * 提示区域
	 */
	.tip-section {
		margin-top: 32rpx;
		margin-bottom: 16rpx;
	}

	.tip-card {
		background: linear-gradient(135deg, #fff9e6 0%, #ffe9a0 100%);
		border-radius: 16rpx;
		padding: 20rpx 24rpx;
		display: flex;
		align-items: center;
		gap: 12rpx;
		border: 2rpx solid #fbbf24;
	}

	.tip-icon {
		font-size: 32rpx;
	}

	.tip-text {
		font-size: 26rpx;
		color: #d97706;
		font-weight: 600;
		line-height: 1.5;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}

	/**
	 * 底部操作栏
	 */
	.bottom-bar {
		flex-shrink: 0;
		padding: 24rpx 32rpx;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		background: white;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
	}

	.action-btn {
		width: 100%;
		height: 96rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.97);
		}

		&[disabled] {
			opacity: 0.5;
			box-shadow: none;
		}
	}

	.primary-btn {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 700;
		color: white;
	}
</style>

